<template>
    <div class="app-container">

        <div class="card-wrap flex-column justify-end card-padding">

            <div class="card-title-wrap">
                <span>车辆信息</span>
                <span></span>
            </div>

            <el-descriptions title="">
                <el-descriptions-item label="车架号">
                    {{ form.vinNo|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="车辆状态">
                    <dict-tag
                        :options="dict.type.car_business_type"
                        :value="form.businessType"/>
                </el-descriptions-item>
                <el-descriptions-item label="品牌/车型/车款">
                    {{ form.brandName|filterNull }}/{{ form.seriesName|filterNull }}/{{ form.modelName|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="产权方">
                    {{ form.propertyRightName|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="车辆归属">
                    {{ form.ascription|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="大区">
                    {{ form.region|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="运营">
                    {{ form.operationsName|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="产品类型">
                    <dict-tag
                        :options="dict.type.quota_rent_type"
                        :value="form.contractType"/>
                </el-descriptions-item>
                <el-descriptions-item label="燃油类型">
                    <dict-tag
                        :options="dict.type.fuel_type"
                        :value="form.fuelType"/>
                </el-descriptions-item>
                <el-descriptions-item label="客户名称">{{ form.customerName|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="总保证金金额">{{ form.aa|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="单车保证金金额">{{ form.aa|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="剩余保证金金额">{{ form.aa|filterNull }}</el-descriptions-item>

            </el-descriptions>

        </div>
        <div class="card-wrap flex-column justify-end card-padding">

            <el-tabs v-model="activeName">
                <el-tab-pane label="违章信息" name="first">
                    <el-descriptions title="违章信息">
                        <el-descriptions-item label="采集单位">
                            {{ form.collectUnit|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="违章时间">
                            {{ form.violationTime|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="违章事件">
                            {{ form.violationEvent|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="罚款金额">
                            {{ form.penaltyPrice|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="罚款分数">{{ form.penaltyScore|filterNull }}</el-descriptions-item>
                        <el-descriptions-item label="违章地点">{{
                                form.violationAddress|filterNull
                            }}
                        </el-descriptions-item>
                        <el-descriptions-item label="扣款类别">
                            <dict-tag
                                :options="dict.type.deduction_type"
                                :value="form.deductionType"/>
                        </el-descriptions-item>
                        <el-descriptions-item label="是否处理">
                            <dict-tag
                                :options="dict.type.illegal_process_status"
                                :value="form.handleStatus"/>
                        </el-descriptions-item>
                        <el-descriptions-item label="违章备注">{{
                                form.violationRemark|filterNull
                            }}
                        </el-descriptions-item>

                    </el-descriptions>
                    <el-descriptions title="消息提醒记录">
                    </el-descriptions>

                    <el-table
                        border
                        :data="messageList"
                        style="width: 100%">
                        <el-table-column
                            prop="createTime" align="center"
                            label="消息发送时间">
                            <template v-slot="{row}">
                                {{ row.createTime|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="sendContent" align="center"
                            label="发送内容">
                            <template v-slot="{row}">
                                {{ row.sendContent|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="sendUserName" align="center"
                            label="发送者">
                            <template v-slot="{row}">
                                {{ row.sendUserName|filterNull }}
                            </template>
                        </el-table-column>
                    </el-table>


                </el-tab-pane>
                <el-tab-pane label="违章记录" name="second">
                    <el-descriptions title="">
                        <el-descriptions-item label="违章总次数">
                            {{ recordCount.violationTotalCount|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="已处理违章数">{{
                                recordCount.handleViolationCount|filterNull
                            }}
                        </el-descriptions-item>
                        <el-descriptions-item label="未处理违章数">{{
                                recordCount.unHandleViolationCount|filterNull
                            }}
                        </el-descriptions-item>
                        <el-descriptions-item label="罚款总金额">{{
                                recordCount.penaltyTotalPrice|filterNull
                            }}
                        </el-descriptions-item>
                        <el-descriptions-item label="违章总分数">{{
                                recordCount.violationTotalScore|filterNull
                            }}
                        </el-descriptions-item>

                    </el-descriptions>

                    <el-table
                        border
                        :data="illegalList"
                        style="width: 100%">
                        <el-table-column
                            type="index" label="序号" align="center"
                            width="50">
                        </el-table-column>
                        <el-table-column
                            prop="name" align="center"
                            label="操作">
                            <template v-slot="{row}">
                                <e-button size="mini" type="text" @click="goDetail(row)">查看
                                </e-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="handleStatus" align="center"
                            label="处理状态">
                            <template v-slot="{row}">
                                <dict-tag
                                    :options="dict.type.illegal_process_status"
                                    :value="row.handleStatus"/>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="280" show-overflow-tooltip
                            prop="collectUnit" align="center"
                            label="采集单位">
                            <template v-slot="{row}">
                                {{ row.collectUnit|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" show-overflow-tooltip
                            prop="violationTime" align="center"
                            label="违章时间">
                            <template v-slot="{row}">
                                {{ row.violationTime|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column min-width="210" show-overflow-tooltip
                            prop="violationEvent" align="center"
                            label="违法行为">
                            <template v-slot="{row}">
                                {{ row.violationEvent|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column min-width="100" show-overflow-tooltip
                            prop="penaltyPrice" align="center"
                            label="罚款金额">
                            <template v-slot="{row}">
                                {{ row.penaltyPrice|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column min-width="100" show-overflow-tooltip
                            prop="penaltyScore" align="center"
                            label="罚款分数">
                            <template v-slot="{row}">
                                {{ row.penaltyScore|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column min-width="260" show-overflow-tooltip
                            prop="violationAddress" align="center"
                            label="违章地点">
                            <template v-slot="{row}">
                                {{ row.violationAddress|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column min-width="130" show-overflow-tooltip
                            prop="deductionType" align="center"
                            label="扣款类别">
                            <template v-slot="{row}">
                                <dict-tag
                                    :options="dict.type.deduction_type"
                                    :value="row.deductionType"/>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="260" show-overflow-tooltip
                            prop="violationRemark" align="center"
                            label="违章记录备注">
                            <template v-slot="{row}">
                                {{ row.violationRemark|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" show-overflow-tooltip
                            prop="handleTime" align="center"
                            label="处理记录时间">
                            <template v-slot="{row}">
                                {{ row.handleTime|filterNull }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>


        </div>

        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel">返回</el-button>
            <!--            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>-->
        </div>

    </div>
</template>

<script>

import {
    getCarViolationMessageList,
    getIllegal,
    queryCarViolationInfoStatistics,
    queryCarViolationInfoStatisticsByCarNo,
    queryCarViolationRecord
} from "@/api/illegalManage/illegalList";

export default {
    name: "IllegalListDetail",
    components: {},
    dicts: ['quota_rent_type', 'deduction_type', 'illegal_process_status', 'fuel_type', 'car_business_type'],
    data() {
        return {
            buttonLoading: false,
            activeName: 'first',
            form: {},
            messageList: [],
            recordCount: {},
            illegalList: []
        };
    },
    watch: {
        '$route': {
            handler(val) {
                console.log('this.$route', this.$route)

                if (val && val.name == this.$options.name) {
                    if (this.$route.query && this.$route.query.carViolationId && !this.$route.query.tabClick) {
                        this.getOldData(this.$route.query.carViolationId, this.$route.query.carNo);
                    } else if (!this.$route.query.tabClick) {
                        this.form = {}
                    }

                }
            },
            immediate: true,
            deep: true
        }
    },

    methods: {
        cancel() {
            this.$router.back();
            this.$store.dispatch('tagsView/delView', this.$route);
        },
        getOldData(id, carNo) {
            getIllegal(id).then(res => {
                this.form = res.data
            })

            getCarViolationMessageList(id).then(res => {
                this.messageList = res.data
            })

            if(carNo){
                queryCarViolationRecord(carNo).then(res => {
                    this.illegalList = res.data
                })
            }

            queryCarViolationInfoStatisticsByCarNo(carNo).then(res => {
                this.recordCount = res.data
            })
        },
        goDetail(row) {
          console.log('carNo----', row.carNo)
            this.getOldData(row.carViolationId, row.carNo);
            this.activeName = 'first'

            // this.$router.push({
            //     name: 'IllegalListDetail',
            //     query: {carViolationId: row.carViolationId}
            // })
        },
        // cancel(){
        //     this.$router.back()
        // },
        // submitForm(){
        //     let that = this
        //     this.$refs["followForm"].validate(valid => {
        //         if (valid) {
        //             this.buttonLoading = true;
        //
        //             cluesFollowRecordAdd({
        //                 cluesId:that.$route.query.cluesId,
        //                 ...that.followForm
        //             }).then(res=>{
        //                 this.buttonLoading = false;
        //                 this.$modal.msgSuccess( "提交成功");
        //                 this.$router.back()
        //             }).finally(e=>{
        //                 this.buttonLoading = false;
        //             })
        //         }
        //     });
        // },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}
</style>
